<%@ page import="com.nextStep.entity.Users" %>
<%@ page import="java.util.Map" %>
<%@ page import="java.util.List" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>

<html lang="en" dir="ltr">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>mySqlExecute【用户操作中心】</title>

    <!-- GOOGLE FONTS -->
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500|Poppins:400,500,600,700|Roboto:400,500" rel="stylesheet"/>
    <link href="https://cdn.materialdesignicons.com/3.0.39/css/materialdesignicons.min.css" rel="stylesheet" />

    <!-- PLUGINS CSS STYLE -->
    <link href="../plugins/toaster/toastr.min.css" rel="stylesheet" />
    <link href="../plugins/nprogress/nprogress.css" rel="stylesheet" />
    <link href="../plugins/flag-icons/css/flag-icon.min.css" rel="stylesheet"/>
    <link href="../plugins/jvectormap/jquery-jvectormap-2.0.3.css" rel="stylesheet" />
    <link href="../plugins/ladda/ladda.min.css" rel="stylesheet" />
    <link href="../plugins/select2/css/select2.min.css" rel="stylesheet" />
    <link href="../plugins/daterangepicker/daterangepicker.css" rel="stylesheet" />

    <!-- SLEEK CSS -->
    <link id="sleek-css" rel="stylesheet" href="../css/sleek.css" />



    <!-- FAVICON -->
    <link href="../img/favicon.png" rel="shortcut icon" />

    <!--
      HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries
    -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script src="../plugins/nprogress/nprogress.js"></script>
</head>

<%--class="sidebar-fixed sidebar-dark header-light header-fixed"--%>
<body  id="body">
<script>   //加载进度条
    NProgress.configure({ showSpinner: false });
    NProgress.start();
</script>

<%--判断是否登录--%>
<%
    if(session.getAttribute("LOGIN_DATA")==null){
        response.sendRedirect("../login.jsp");
        return ;
    }

    Map map = (Map) session.getAttribute("DATABASE_DATA");
%>


<div class="mobile-sticky-body-overlay"></div>

<div class="wrapper">

    <div class="page-wrapper">
        <!-- Header -->
        <header class="main-header " id="header">
            <nav class="navbar navbar-static-top navbar-expand-lg">
                <!-- Sidebar toggle button -->
                <%--<button id="sidebar-toggler" class="sidebar-toggle">--%>
                    <span class="sr-only">Toggle navigation</span>
                <%--</button>--%>
                <!-- search form -->
                <div class="search-form d-none d-lg-inline-block">
                    <div class="input-group">
                        <button type="button" name="search" id="search-btn" class="btn btn-flat">
                            <i class="mdi mdi-magnify"></i>
                        </button>
                        <input type="text" name="query" id="search-input" class="form-control" value="mysqlExecute 主页"
                               autofocus autocomplete="off"  readonly="readonly" style="font-size: 28px"/>
                    </div>
                    <div id="search-results-container">
                        <ul id="search-results"></ul>
                    </div>
                </div>

                <div class="navbar-right ">
                    <ul class="nav navbar-nav">
                        <!-- 菜单栏 -->
                        <li class="dropdown user-menu">
                            <button href="#" class="dropdown-toggle nav-link" data-toggle="dropdown">
                                <img src="../img/user/user.png" class="user-image" alt="User Image" />
                                <span class="d-none d-lg-inline-block"><%=((Users)session.getAttribute("LOGIN_DATA")).getName() %></span>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-right">
                                <!-- User image -->
                                <li class="dropdown-header">
                                    <img src="../img/user/user.png" class="img-circle" alt="User Image" />
                                    <div class="d-inline-block">
                                        <%=((Users)session.getAttribute("LOGIN_DATA")).getName()%> <small class="pt-1"><%=((Users)session.getAttribute("LOGIN_DATA")).getEmail()%></small>
                                    </div>
                                </li>
                                <li>
                                    <a href="index"><i class="mdi mdi-account"></i> 主页</a>
                                </li>
                                <li>
                                    <a href="dbConfigAdmin"> <i class="mdi mdi-settings"></i> 数据库配置 </a>
                                </li>
                                <li>
                                    <a href="sqlplus"> <i class="mdi mdi-settings"></i> sqlPlus 命令操作</a>
                                </li>
                                <li class="dropdown-footer">
                                    <a href="../user/exit"> <i class="mdi mdi-logout"></i> 退出 </a>
                                </li>

                            </ul>
                        </li>
                    </ul>
                </div>

            </nav>


        </header>

        <%--数据展示--%>
        <div class="content-wrapper">
            <div class="card-header justify-content-between align-items-center card-header-border-bottom">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <font size="5" >数据库:</font>

                <select id="selectDataBase" class="form-control input-sm" style="width:200px; display: inline;">
                    <%
                        for(Object key:map.keySet()){
                            String dataBaseName = (String)key;  //数据库名
                    %>
                    <option id ="<%=dataBaseName%>" value ="<%=dataBaseName%>"><%=dataBaseName%></option>
                    <%
                        }
                    %>
                </select>

                <font size="5" >表名:</font>
                <%--显示当前数据库表--%>
                <select id="selectTable" class="form-control input-sm" style="width:200px; display: inline;">
                </select>&nbsp;&nbsp;&nbsp;&nbsp;
                <button class="btn btn-primary btn-pill" id="dateSelectAll" onclick="dateSelectAll()">查询所有 </button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;


            </div>

            <div class="content">

                <font size="3" >字段名：</font>
                <select  id="selectColumns" class="form-control input-sm" style="width:200px; display: inline;">
                </select>

                <input id="dataSelectInput" type="text" class="form-control" style="width:200px; display: inline;" placeholder="字段值"/>&nbsp;&nbsp;&nbsp;&nbsp;
                <button class="btn btn-primary btn-pill" id="dateSelect" onclick="dateSelect()">查询 </button>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <button class="btn btn-primary btn-pill" id="add2-task" onclick="addRow()">增加记录 </button>

                <br>
                <br>
                <br>
                <h4  class="d-inline-block"> [ <a id="disTableName" ></a> ].表 </h4>
            <div style="overflow-x:scroll;">
                <table id="table" class="table table-bordered">

                </table>

            </div>
             <div id="divOper" style="margin:0 auto;width:1000px;height:50px;">
                 <input id="currPage" type="hidden"  value="1">  <%--当前页码--%>
                 <button id="homePage" onclick="homePage()" class="btn btn-primary btn-pill"  >首页</button>&nbsp;&nbsp;&nbsp;
                 <button id="previousPage" onclick="previousPage()" class="btn btn-primary btn-pill"  >上一页</button> &nbsp;&nbsp;&nbsp;
                 <button id="nextPage" onclick="nextPage()" class="btn btn-primary btn-pill" >下一页</button>&nbsp;&nbsp;&nbsp;
                 <button id="endPage" onclick="endPage()" class="btn btn-primary btn-pill"  >尾页</button>&nbsp;&nbsp;&nbsp;
                 第
                     <a id="pageNum"  ></a>
                     页 / 共
                     <a id="pageNumSum" > </a>
                     页    <%--显示分页  --%>
                 <input id="jumpInput" type="text"  style="border-radius: 100px;text-align:center;text-decoration: none;">&nbsp;&nbsp;
                 <button id="jumpPage" onclick="jumpPage()" class="btn btn-primary btn-pill"  >跳转</button>
             </div>

            </div>
        </div>

        <jsp:include page="footer.jsp"/>

    </div>
</div>



<script src="../plugins/jquery/jquery.min.js"></script>
<script src="../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="../plugins/toaster/toastr.min.js"></script>
<script src="../plugins/slimscrollbar/jquery.slimscroll.min.js"></script>
<script src="../plugins/charts/Chart.min.js"></script>
<script src="../plugins/ladda/spin.min.js"></script>
<script src="../plugins/ladda/ladda.min.js"></script>
<script src="../plugins/jquery-mask-input/jquery.mask.min.js"></script>
<script src="../plugins/select2/js/select2.min.js"></script>
<script src="../plugins/jvectormap/jquery-jvectormap-2.0.3.min.js"></script>
<script src="../plugins/jvectormap/jquery-jvectormap-world-mill.js"></script>
<script src="../plugins/daterangepicker/moment.min.js"></script>
<script src="../plugins/daterangepicker/daterangepicker.js"></script>
<script src="../plugins/jekyll-search.min.js"></script>
<script src="../js/sleek.js"></script>
<script src="../js/chart.js"></script>
<script src="../js/date-range.js"></script>
<script src="../js/map.js"></script>
<script src="../js/custom.js"></script>

<script type="text/javascript">
    var limitPageSize = 7;  //数据分页显示数据数量大小


    //添加记录
    function addRow() {
        var dbName = document.getElementById("selectDataBase").value;
        var tbName = document.getElementById("selectTable").value;

        // window.location.replace("updateRow?dbName="+dbName+"&tbName="+tbName+"&rowIdValue="+rowIdValue);
        window.location.href="addRowPage?dbName="+dbName+"&tbName="+tbName;
    }

    //更新数据表下拉框
    var timDB =  window.setInterval(function(){
        if(localStorage.pageLoadOver==1) {
            var selectDataBase = document.getElementById("selectDataBase");  //数据库下拉框对象
            var dbName = selectDataBase.value;

            if (dbName == localStorage.dbName ) {  //当前值与储存值一致   ，下拉框未发生改变,无需刷新
               // alert("表无需刷新，条件数据库\n dbName:"+dbName+"\n localStorage.dbName:"+localStorage.dbName);

                localStorage.noRefrTableFlag=1;
                return;
            }
            //alert("1定时请求数据库表名");

            localStorage.noRefrTableFlag=0;

            localStorage.dbName = dbName;   //保存当前数据库下拉框对象值

            showTableNP(dbName);
        }

    },300);

    function showTableNP(dbName){
        //alert("2向数据库请求所有表名");

        $.ajax({
            url: "showTable",
            type: "post",
            data: {dbName: dbName},
            success: function (data) {
                //更新数据表
                var selectTable = document.getElementById("selectTable");
                selectTable.options.length = 0;
                for (var i = 0; i < data.length; i++) {
                    selectTable.add(new Option(data[i], data[i]));  //添加当前查询数据库的表名
                }
            }
        })
    }

    //更新数据字段下拉框  及  表
    var timTB =  window.setInterval(function(){
        if(localStorage.pageLoadOver==1 && localStorage.noRefrTableFlag==1) {
            var selectTable = document.getElementById("selectTable");  //数据表下拉框对象
            var tbName = selectTable.value;

            if (tbName == localStorage.tbName || tbName == "") {  //当前值与储存值一致   ，下拉框未发生改变,无需刷新
                //alert("数据字段无刷新");
                return;
            }

            //alert("3字段刷新，条件表 \n tbName:"+tbName+"\n localStorage.tbName:"+localStorage.tbName);

            localStorage.tbName = tbName;   //保存当前数据表下拉框对象值
            var dbName = document.getElementById("selectDataBase").value;  //数据库下拉框对象
            document.getElementById("currPage").value=1;   //恢复页码为1

            selectLimitSumNum(dbName,tbName);

            //alert("3请求当前表内容");
            selectTableNP(dbName,tbName,1,limitPageSize);
            document.getElementById("jumpInput").value="";   //清除跳转框内容

        }

    },500);

    //查询总页数
    function selectLimitSumNum(dbName,tbName) {

        $.ajax({
            url: "selectLimitSumNum",
            type: "post",
            async:false,
            data: {dbName: dbName, tbName: tbName, pageSize: limitPageSize},
            success: function (pageNum) {
                document.getElementById("pageNumSum").innerHTML = pageNum ;   //更新总页数

            }
        });
    }

    //首页
    function homePage() {
        var dbName = document.getElementById("selectDataBase").value;  //数据库下拉框对象
        var tbName = document.getElementById("selectTable").value;
        document.getElementById("currPage").value=Number( 1);  //修改当前页码
        selectTableNP(dbName,tbName, 1 ,limitPageSize);
    }

    //上一页
    function previousPage() {
        var dbName = document.getElementById("selectDataBase").value;  //数据库下拉框对象
        var tbName = document.getElementById("selectTable").value;
        document.getElementById("currPage").value=Number( document.getElementById("currPage").value) -Number(1);  //修改当前页码
        selectTableNP(dbName,tbName, document.getElementById("currPage").value ,limitPageSize);
    }

    //下一页
    function nextPage() {
        var dbName = document.getElementById("selectDataBase").value;  //数据库下拉框对象
        var tbName = document.getElementById("selectTable").value;
        document.getElementById("currPage").value=Number( document.getElementById("currPage").value) +Number(1);  //修改当前页码
        selectTableNP(dbName,tbName, document.getElementById("currPage").value ,limitPageSize);
    }

    //尾页
    function endPage() {
        var dbName = document.getElementById("selectDataBase").value;  //数据库下拉框对象
        var tbName = document.getElementById("selectTable").value;
        document.getElementById("currPage").value=Number( document.getElementById("pageNumSum").innerText);  //修改当前页码
        selectTableNP(dbName,tbName, document.getElementById("pageNumSum").innerText ,limitPageSize);
    }

    //跳转页面
    function jumpPage() {
        var dbName = document.getElementById("selectDataBase").value;  //数据库下拉框对象
        var tbName = document.getElementById("selectTable").value;
        var jumpInput = document.getElementById("jumpInput").value;
        if(jumpInput <1 || jumpInput> Number(document.getElementById("pageNumSum").innerText)){
            alert("页数超出索引范围！");
            return ;
        }
        selectTableNP(dbName,tbName,jumpInput ,limitPageSize);
        document.getElementById("jumpInput").value="";

    }

    //查询按钮
    function dateSelect() {
        document.getElementById( "divOper").style.display="none";  //不显示 下一页等操作按钮
        var dbName = document.getElementById("selectDataBase").value;  //数据库下拉框对象
        var tbName = document.getElementById("selectTable").value;
        var selectColumns=document.getElementById("selectColumns").value;   //列名
        var dataSelectInput=document.getElementById("dataSelectInput").value;   //值


        var table=document.getElementById("table");  //获取Table
        var length= table.rows.length;          //获得Table下的行数
        if(length!=0){              //如果有行，则清空
            for(var i=length-1;i>=0;i--){
                table.deleteRow(i);
            }
        }
        //更新显示数据表
        $.ajax({
            url: "condTable",
            type: "post",
            data: {dbName:dbName,tbName:tbName,selectColumns:selectColumns,dataSelectInput:dataSelectInput},
            success: function (data) {
                for (var i = 0; i < data.length; i++) {
                    var tr = table.insertRow();  //创建一行对象
                    for (var j = 0; j < data[i].length+1 ; j++) {
                        var  td =tr.insertCell();  //创建一列对象

                        if(j==data[i].length){   //本行的最后一列，添加操作链接
                            if(i==0){  //第一行 显示标题
                                td.innerHTML="操作";
                            }else {
                                td.innerHTML="<button onclick='updateData(\""+data[i][0]+"\")'><font color='#4c84ff'>编辑</font></button>  <button onclick='deleteData(\""+data[i][0]+"\")'><font color='#4c84ff'>删除</font></button>";
                            }
                        }else {   //前0----倒数第二列
                            td.innerHTML=data[i][j];
                        }

                    }
                    table.appendChild(tr);
                }
                document.getElementById('table').appendChild(table);

            }
        })
    }

    //触发查询所有按钮
    function dateSelectAll() {
        localStorage.tbName="";
    }

    function selectTableNP(dbName,tbName,pageNum,pageSize){
        document.getElementById( "divOper").style.display="block";   //显示 下一页等操作按钮
        //alert("4正在请求表内容");
        document.getElementById("disTableName").innerHTML = tbName;   //更新显示表名
        document.getElementById("pageNum").innerHTML = pageNum ;   //更新页数
        if(pageNum == 1){    //上一页按钮状态
            document.getElementById("previousPage").disabled=true;
        }else {
            document.getElementById("previousPage").disabled=false;
        }
        if(pageNum == document.getElementById("pageNumSum").innerText){   //下一页按钮状态
            document.getElementById("nextPage").disabled=true;
        }else {
            document.getElementById("nextPage").disabled=false;
        }
        if(pageNum == 1){   //首页按钮状态
            document.getElementById("homePage").disabled=true;
        }else {
            document.getElementById("homePage").disabled=false;
        }
        if(pageNum == document.getElementById("pageNumSum").innerText){   //尾页按钮状态
            document.getElementById("endPage").disabled=true;
        }else {
            document.getElementById("endPage").disabled=false;
        }
        var selectColumns = document.getElementById("selectColumns");
        selectColumns.options.length = 0;
        var table=document.getElementById("table");  //获取Table
        var length= table.rows.length;          //获得Table下的行数
        if(length!=0){              //如果有行，则清空
            for(var i=length-1;i>=0;i--){
                table.deleteRow(i);
            }
        }
        //更新显示数据表
        $.ajax({
            url: "selectTable",
            type: "post",
            data: {dbName:dbName,tbName:tbName,pageNum:Number(pageNum)-Number(1),pageSize:pageSize},
            success: function (data) {
                for (var i = 0; i < data.length; i++) {
                    var tr = table.insertRow();  //创建一行对象
                    for (var j = 0; j < data[i].length+1 ; j++) {
                        var  td =tr.insertCell();  //创建一列对象
                        if(i==0 && j!=data[i].length ){   //表头文本，添加一份至，字段下拉框
                            selectColumns.add(new Option(data[i][j], data[i][j]));  //添加当前查询数据库的表字段名
                        }
                        if(j==data[i].length){   //本行的最后一列，添加操作链接
                            if(i==0){  //第一行 显示标题
                                td.innerHTML="操作";

                            }else {
                                td.innerHTML="<button onclick='updateData(\""+data[i][0]+"\")'><font color='#4c84ff'>编辑</font></button>  <button onclick='deleteData(\""+data[i][0]+"\")'><font color='#4c84ff'>删除</font></button>";
                            }
                        }else {   //前0----倒数第二列
                            td.innerHTML=data[i][j];
                        }

                    }
                    table.appendChild(tr);
                }
                document.getElementById('table').appendChild(table);

            }
        })

    }
    //编辑本行
    function updateData(rowIdValue) {
        var dbName = document.getElementById("selectDataBase").value;
        var tbName = document.getElementById("selectTable").value;

        // window.location.replace("updateRow?dbName="+dbName+"&tbName="+tbName+"&rowIdValue="+rowIdValue);
        window.location.href="updateRow?dbName="+dbName+"&tbName="+tbName+"&rowIdValue="+rowIdValue;

        return;

    }
    //删除本行
    function deleteData(rowId) {
        //alert("deleteData"+rowId);
        var dbName = document.getElementById("selectDataBase").value;
        var tbName = document.getElementById("selectTable").value;
        //更新显示数据表
        $.ajax({
            url: "deleteData",
            type: "post",
            data: {dbName:dbName,tbName:tbName,idValue:rowId},
            success: function (status) {
                if(status == 1){
                    localStorage.tbName="";
                }else {
                    alert("当前表结构可能不支持nextStep的操作，请使用sql命令操作");

                }
            }

        })
    }


/*

    document.getElementById("addDB").onclick=function() {
        alert("12311111111111111");
    }
*/


    window.onload=function(){

        localStorage.clear();
        //如果想保存值，可以每次只清除db  tb 的值，别的不清除，这样就可以跳转道指定页面
        localStorage.pageLoadOver=1;
        //alert("********localStorage.dbName:"+localStorage.dbName);
    };




</script>




</body>
</html>
